<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      fullscreen
      append-to-body
      title="文件预览"
      :before-close="handleClose"
      @closed="handleClose"
    >
      <template v-if="allowedFormats.includes(fileType)">
        <vue-office-docx
          v-if="fileType === 'docx'"
          :src="fileUrl"
          style="height: 100vh;"
          @rendered="renderedHandler"
          @error="errorHandler"
        />

        <vue-office-excel
          v-if="['xlsx','excel' ].includes(fileType)"
          :src="fileUrl"
          style="height: 100vh;"
          @rendered="renderedHandler"
          @error="errorHandler"
        />

        <vue-office-pdf
          v-if="fileType === 'pdf'"
          :src="fileUrl"
          style="height: 100vh"
          @rendered="renderedHandler"
          @error="errorHandler"
        />
      </template>
      <template v-if="pictureList.includes(fileType)">
        <el-image
          style="width: 100%; height: auto; max-height: 100vh;"
          :src="uploadFileUrl + `/biz/file/get?fileId=${fileUrl}&modelKey=middle`"
          :preview-src-list="[uploadFileUrl + `/biz/file/get?fileId=${fileUrl}&modelKey=original`]"
          @error="errorHandler"
        >
        </el-image>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'

import VueOfficePdf from '@vue-office/pdf'

export default {
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePdf
  },
  props: {
    fileType: {
      type: String,
      required: true,
    },
    fileUrl: {
      type: String,
      required: true,
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      uploadFileUrl: process.env.VUE_APP_BASE_API,
      allowedFormats: ["docx", "pdf", "excel", "xlsx"],
      pictureList: ["png", "jpg", "jpeg", "gif"]
    }
  },
  methods: {
    renderedHandler() {
      console.log("渲染完成")
    },
    errorHandler() {
      console.log("渲染失败")
    },
    handleClose() {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
